<template>
  <div>
    <h3>RSA测试</h3>
    <h5>RSA加密</h5>
    <el-row>
      <el-col :span="2">
        <div class="grid-content bg-purple">明文</div>
      </el-col>
      <el-col :span="20">
        <div class="grid-content bg-purple">
          <el-input v-model="inputValue" placeholder="明文"></el-input>
        </div>
      </el-col>
      <el-col :span="2">
        <div class="grid-content bg-purple">
          <el-button type="primary" @click="handlerEncrypt">加密内容</el-button>
        </div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="2">
        <div class="grid-content bg-purple">密文</div>
      </el-col>
      <el-col :span="20">
        <div class="grid-content bg-purple">
          <el-input v-model="entryptValue" placeholder="加密后"></el-input>
        </div>
      </el-col>
    </el-row>

    <h5>RSA解密</h5>
    <el-row>
      <el-col :span="2">
        <div class="grid-content bg-purple"><el-button type="primary" @click="handleDecrypt">解密内容</el-button></div>
      </el-col>
      <el-col :span="22">
        <div class="grid-content bg-purple">
          <el-input v-model="detryptValue" placeholder="解密后的内容为"></el-input>
        </div>
      </el-col>
    </el-row>

    <h5>RSA签名</h5>
    <el-row>
      <el-col :span="2">
        <div class="grid-content bg-purple">签名为</div>
      </el-col>
      <el-col :span="20">
        <div class="grid-content bg-purple">
          <el-input v-model="signature" placeholder="签名为:"></el-input>
        </div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="2">
        <el-button type="primary" @click="handleSign">生成签名</el-button>
      </el-col>
      <el-col :span="1">

      </el-col>
      <el-col :span="2">
        <el-button type="primary" @click="handleSignVerified">验证签名</el-button>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="24">
        <div class="grid-content bg-purple"><el-button type="primary" @click="generateKey">generateKey</el-button></div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="2">
        <div class="grid-content bg-purple">公钥</div>
      </el-col>
      <el-col :span="22">
        <div class="grid-content bg-purple">
          <el-input type="textarea" :rows="10" placeholder="公钥" v-model="publicKey"></el-input>
        </div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="2">
        <div class="grid-content bg-purple">私钥</div>
      </el-col>
      <el-col :span="22">
        <div class="grid-content bg-purple">
          <el-input type="textarea" :rows="10" placeholder="私钥" v-model="privateKey"></el-input>
        </div>
      </el-col>
    </el-row>

  </div>
</template>

<script>
import { generateRsaKeyWithPKCS8, encryptByRSA, decryptByRSA, signBySHA256WithRSA, verifyBySHA256WithRSA } from '@/common/cryptoUtils';

export default {
  name: 'RSADemo',
  data() {
    return {
      publicKey: '',
      privateKey: '',
      inputValue: '',
      entryptValue: '',
      detryptValue: '',
      signature: ''
    }
  },
  components: {
  },
  created() {
    this.publicKey = `-----BEGIN PUBLIC KEY-----
MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQCEV4nCRwJlAZw2Io2T4bsHNnVA
Jzaq7zCd8naxfp0b1dvVxKdEZZAKGkc/w/gHyAHxzLjmOcAKBwz8kCbL+MRsKxVR
HJNfE17tcPXhAHFY5/L5FgfLtY8ty5tmGkRFSYG6phIdW/SUQMWqSsogy8f3+pia
SGfibV6zOC1UlbMixQIDAQAB
-----END PUBLIC KEY-----
`;
    this.privateKey = `-----BEGIN PRIVATE KEY-----
MIICdQIBADANBgkqhkiG9w0BAQEFAASCAl8wggJbAgEAAoGBAIRXicJHAmUBnDYi
jZPhuwc2dUAnNqrvMJ3ydrF+nRvV29XEp0RlkAoaRz/D+AfIAfHMuOY5wAoHDPyQ
Jsv4xGwrFVEck18TXu1w9eEAcVjn8vkWB8u1jy3Lm2YaREVJgbqmEh1b9JRAxapK
yiDLx/f6mJpIZ+JtXrM4LVSVsyLFAgMBAAECgYBpp31KhehKfUOaEHHZCxCGjJqE
8gl54+V7Y5QQ1hVVoKGWAx7Kww6AkkQpiylcBPhQc3F2E8rV9pUOmYLvupYM4zVx
CU/XA6JKMANrU8O3M7gLETh13f12UldSulwK+2iWv7E4qPXW+2csl7E0mse6ehOs
ZGW0hwOTzR6x8c8mwQJBAL5FxM/XR9HysAM1k4uY+MRKsG8gopYIG3tf/65rOKX1
H06YoG2ltDxgxi5mDZQqrxyI6EhFJUw3G3fmrHe5N/ECQQCyDtYOXaqlaX20dIKi
24qY9nkTT9BZfKrykcsPN5P399QVPWleSLDVgUPNLSGs/icIvvmtBl7KmWbjLykr
RkwVAkA/ad1IL8Wd8TY8O5TrB5aRRRs8TjIhsp4GJl5+cPm2RdWjSjbdlEZXgSFL
wXNxGDC4X+CahYECv7MF6Pk+BZrhAkBnhFKUFYaBFhxbziSos8QW+6wWOx+g9uaX
kYUhOqmOzwkAtCxPASm1ZqpZXXSnkzZ0UjrribmQRbDYQXHI09ylAkBLifyg/YQt
iZrllsaG0BfBKjPC6geY621mXMz07ad/DVhARa/kh6CEbSW1oG89aoH1NjlLVjVO
95IAl2HVvFUy
-----END PRIVATE KEY-----`;
  },
  methods: {
    generateKey() {
      console.log('click generateKey');
      const { privateKey, publicKey } = generateRsaKeyWithPKCS8();
      this.publicKey = publicKey;
      this.privateKey = privateKey;
    },
    handlerEncrypt() {
      const cipherText = encryptByRSA(this.publicKey, this.inputValue);
      console.log(`加密后的内容为：\n${cipherText}`);
      this.entryptValue = cipherText;
    },
    handleDecrypt() {
      const plainText = decryptByRSA(this.privateKey, this.entryptValue);
      console.log(`解密后的内容为：\n${plainText}`);
      this.detryptValue = plainText;

    },
    handleSign() {
      const signature = signBySHA256WithRSA(this.publicKey, this.inputValue);
      console.log(`生成的签名：\n${signature}`);
      this.signature = signature;
    },
    handleSignVerified() {

      const isVerified = verifyBySHA256WithRSA(this.privateKey, this.signature, this.inputValue);
      console.log(`是否验签通过：${isVerified}`);
      this.$message({
        message: isVerified,
        type: 'warning'
      });
    }
  },
  mounted() {

  },
}
</script>

<style></style>